<template>
  <div id="components-layout-demo-basic">
    <!--网站辅助导航-->
    <a-row type="flex" justify="start" align="top" :class="header.helperBarShowStatus">
      <a-col :span="24" id="helperHeader">
        <BlogHelperHeader></BlogHelperHeader>
      </a-col>
    </a-row>
    <!--网站主导航-->
    <a-affix :offsetTop="0">
      <a-row class="mainHeaderBootm animated slideInDown" id="mainHeader"
             :style="{background: 'white',display: mainHeaderShowStatus}">
        <a-col :span="4" :offset="2">
          <a @click="toBlogIndexPage()">
            <BlogLogo></BlogLogo>
            <!--<LogoSvg></LogoSvg>-->
          </a>
        </a-col>
        <a-col :span="12">
          <div v-if="scroll.direction==='down'" style="text-align: left;padding-left: 10px;">
            <h1>{{blog.title}}</h1>
          </div>
          <BlogMainHeader v-else class="animated"></BlogMainHeader>
        </a-col>
        <a-col :span="4">
          <div style="padding-top: 10px;">
            <a-button type="default" shape="round" icon="like" @click="blogAgreeClick()">点赞({{blog.starCount}})
            </a-button>
            <a-badge :count="blog===null?0:blog.commentCount">
              <a-button type="default" shape="round" icon="message" @click="showDrawer">评论</a-button>
            </a-badge>
          </div>
        </a-col>
      </a-row>
    </a-affix>
    <!--网站主题路由部分-->
    <!--margin样式去除guteer导致的左右滚动条问题-->
    <a-row type="flex" justify="center" :gutter="16" style="margin: 0 0;">
      <a-col :span="16" id="blogContainer">
        <router-view></router-view>
      </a-col>
      <a-col :span="4">
        <a-affix :offsetTop="70" id="outline-container" class="outline-container"
                 style="overflow-y: auto;height: 640px;" @change="outlineAffixChange">
          <a-divider orientation="left"><strong>博文目录</strong></a-divider>
          <!--<a-layout-sider style="height: 600px;overflow-y: auto;background: white" >-->
          <BlogOutline mode="inline"
                       :openKeys="openKeys"
                       :expandIcon="` `"
                       :selectedKeys="selectedKeys"
                       :menu="treeOutline"
                       class="animated fadeInUp"
          ></BlogOutline>
          <!--</a-layout-sider>-->

        </a-affix>
      </a-col>
    </a-row>
    <!--<router-view></router-view>-->
    <!--网站底部-->
    <a-row>
      <BlogFooter></BlogFooter>
    </a-row>
    <!--回到顶部-->
    <a-back-top/>

    <!--评论抽屉组件-->
    <a-drawer
      title="文明评论"
      :width="720"
      @close="onDrawerClose"
      :visible="commentDrawerVisible"
      :keyboard="true"
      :bodyStyle="{paddingBottom: '80px'}"
    >
      <BlogComment></BlogComment>
    </a-drawer>


    <!--登录弹框-->
    <a-modal
      :zIndex=9999
      :visible="loginVisible"
      @ok="loginOk"
      :confirmLoading="false"
      :footer="null"
      @cancel="loginCancel"
    >
      <Login :loginMode="`blog`"></Login>
    </a-modal>
  </div>
</template>

<style scoped>
  .mainHeaderBootm {
    height: 60px;
    border-bottom: 2px solid #e8e8e8;
    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2); /*阴影*/
  }
</style>


<script>
  import BlogCarousel from '@/components/Blog/BlogCarousel'
  import BlogMainHeader from '@/components/Blog/BlogMainHeader'
  import BlogHelperHeader from '@/components/Blog/BlogHelperHeader'
  import BlogSearch from '@/components/Blog/BlogSearch'
  import BlogFooter from '@/components/Blog/BlogFooter'
  import BlogContent from '@/views/blog/BlogContent'
  import BlogOutline from '@/components/Blog/BlogOutline'
  import BlogComment from '@/views/blog/BlogComment'
  import LogoSvg from '@/assets/blog-logo.svg?inline'
  import { mapGetters, mapActions } from 'vuex'
  import { blogAgreeAction } from '@/api/blog'
  import Login from '@/views/user/Login'
  import BlogLogo from '@/components/tools/BlogLogo'

  export default {
    name: 'BlogDetailLayout',
    components: {
      BlogCarousel,
      BlogMainHeader,
      BlogHelperHeader,
      BlogSearch,
      BlogFooter,
      LogoSvg,
      BlogContent,
      BlogOutline,
      BlogComment,
      Login,
      BlogLogo
    },
    data() {
      return {
        scroll: {
          scrollTop: 0,
          helperHeaderHeight: 0,
          mianHeaderHeight: 0,
          direction: 'up'
        },
        header: {
          blogTitleShowStatus: 'mainHeaderBootm',
          blogCategoryShowStatus: 'mainHeaderBootm top-category',
          helperBarShowStatus: 'animated fadeInDown'
        },
        outlineClickCount: 0,
        mainHeaderShowStatus: 'block',
        commentDrawerVisible: false//评论抽屉是否可见
      }
    },
    computed: {
      ...mapGetters(['openKeys', 'selectedKeys', 'treeOutline', 'activeOpenKeysType', 'blog', 'loginVisible', 'userInfo'])
    },
    mounted() {
      window.addEventListener('scroll', this.getScroll)
    },
    created() {
      this.debounceActiveOutline = _.debounce(this.activeOutline, 100)
    },
    methods: {
      ...mapActions(['loadBlogById']),
      outlineAffixChange(affixed) {
        // console.log('outline affixed is ', affixed)
        // if (affixed) {
        //   let outlineContainer = document.getElementById('outline-container').firstChild
        //   outlineContainer.style['overflow-y'] = 'auto'
        // }
      },
      loginCancel() {
        this.$store.dispatch('setLoginVisible', false)
      },
      loginOk(e) {
        setTimeout(() => {
          this.$store.dispatch('setLoginVisible', false)
        }, 2000)
      },
      // 点赞
      blogAgreeClick() {
        let blogId = this.$route.params.blogId
        blogAgreeAction(blogId).then((res) => {
          if (res.code === '200') {
            this.blog.starCount++
          } else {
            this.$message.warning(res.msg)
          }
        })
      },
      //博客首页
      toBlogIndexPage() {
        this.$router.push('/blog/index')
      },
      showDrawer() {
        let placeholder = `亲爱的${this.userInfo.userName}，快来发表你的评论包(*^__^*)……`
        this.$store.dispatch('setCommentReplyBody', { type: 'B_BLOG_COMMENT', obj: this.blog, placeholder })
        this.commentDrawerVisible = true
      },
      onDrawerClose() {
        this.commentDrawerVisible = false
      },
      activeOutline() {
        // 只要滚动，把事件发送给vuex，让博文目录激活菜单
        this.$store.dispatch('activeOutline', 'i want to active outline item.')
      },
      //监听滚动
      getScroll() {
        /*
        * 临界值：
        *       30：主菜单变成fixed布局
        *       30+55：向下滚动时隐藏主菜单，向上回滚时显示主菜单。
        * */
        let blogContainer = document.getElementById('blogContainer')
        if (!blogContainer) return
        let distance = blogContainer.getBoundingClientRect().top - this.scroll.scrollTop
        if (distance > 0) {
          this.scroll.direction = 'up'
        } else if (distance > 0 && distance <= 54) {
          this.scroll.direction = 'up'
        } else {
          this.scroll.direction = 'down'
        }
        this.scroll.scrollTop = blogContainer.getBoundingClientRect().top
        //‘activeOpenKeysType’是为了处理当点击目录时引起文档滚动，文档滚动有会触发`getScroll`函数，使得目录出现收缩不友好的现象
        // 'outlineClickCount' 是为了处理第一次点击目录时导致目录收缩问题。
        if (this.activeOpenKeysType === 'outline-click' && this.outlineClickCount === 0) {
          this.$store.dispatch('setActiveOpenKeysType', 'window-scroll')
          this.outlineClickCount++
        } else if (this.activeOpenKeysType === 'window-scroll' && this.outlineClickCount === 1) {
          this.outlineClickCount++
        } else if (this.activeOpenKeysType === 'outline-click' && this.outlineClickCount === 1) {
          this.outlineClickCount++
        } else if (this.activeOpenKeysType === 'outline-click' && this.outlineClickCount > 1) {
          this.outlineClickCount++
          this.$store.dispatch('setActiveOpenKeysType', 'window-scroll')
        } else {
          this.debounceActiveOutline('激活博文目录')
        }
      }
    }

  }
</script>


<style scoped>
  .top-category {
    top: -60px;
  }

  .blog-router-active {
    color: black;
  }

  .ant-back-top {
    right: 46px;
  }

  .detail-header {
    background: #FFFFFF;
    padding-bottom: 0;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -webkit-box-shadow: 0 1px 3px rgba(26, 26, 26, .15);
    -moz-box-shadow: 0 1px 3px rgba(26, 26, 26, .15);
    box-shadow: 0 1px 3px rgba(26, 26, 26, 0.15);
    position: fixed;
    width: 100%;
    z-index: 19930916;
    height: 60px !important;
    top: 0;
    transition: .5s ease all;
    -moz-transition: .5s ease all;
    -webkit-transition: .5s ease all;
    -o-transition: .5s ease all;
  }

  /*博客大纲样式*/
  .outline-container >>> .ant-menu-submenu-selected {
    background: rgba(184, 184, 184, 0.2);
    color: black;
    font-weight: bold;
  }

  .outline-container >>> .ant-affix{
    overflow-y: auto;
  }

  .outline-container >>> .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background: rgba(184, 184, 184, 0.2);
  }
</style>
